<template>
    <div>
        <el-select v-model="provinceText" filterable placeholder="请选择省" @change="cityInit" :clearable="true" @clear="cityClear" :style="{width:boxWidth}">
            <el-option
            v-for="item in province"
            :key="item.id"
            :label="item.name"
            :value="item.id">
            </el-option>
        </el-select>
        <el-select v-model="cityText" filterable placeholder="请选择市" @change="areaInit"  :clearable="true" @clear="areaClear" :style="{width:boxWidth,margin:`0 ${centerMargin}px`}">
            <el-option
            v-for="item in city"
            :key="item.id"
            :label="item.name"
            :value="item.id">
            </el-option>
        </el-select>
        <el-select v-model="areaText" filterable placeholder="请选择区"  :clearable="true" @change="areaChange" @clear=" lastClear" :style="{width:boxWidth,'marginRight':`${rightMargin}px`}">
            <el-option
            v-for="item in area"
            :key="item.id"
            :label="item.name"
            :value="item.id">
            </el-option>
        </el-select>
    </div>
</template>

<script>
import {getAddressListById} from '@/api/sales'
export default {
    name:'AddressSelect',
  data() {
    return {
        province:[],
        provinceText:'',
        city:[],
        cityText:'',
        area:[],
        areaText:'',
        provinceId:null,
        cityId:null,
        areaId:null,
        propData:{},
    }
  },
  props:{
    boxWidth:{
      default:'202px',
    },
    chooseProvinceId:null,
    chooseCityId:null,
    chooseAreaId:null,
    centerMargin:{
      type:Number,
      default:20
    },
    rightMargin:{
      type:Number,
      default:20
    }
  },
  created() {
      console.log(this.chooseProvinceId === null&&this.chooseCityId === null&&this.chooseAreaId === null);
    if(this.chooseProvinceId === null&&this.chooseCityId === null&&this.chooseAreaId === null){
      this.provinceText = '';
      this.cityText = '';
      this.areaText = '';
      this.provinceInit();
    }else{
      this.dataInit()
    }
  },
  methods: {  
      async dataInit(){
          let res = await getAddressListById();
            if(res.code === 200){
                this.$nextTick(()=>{
                    this.province=res.data;
                  
                })
            }
            if(this.chooseProvinceId){
                this.provinceText = this.chooseProvinceId;
                 let res = await getAddressListById({id:this.chooseProvinceId});
                if(res.code === 200){
                    this.$nextTick(()=>{
                        this.city=res.data;
                    })
                }
                if(this.chooseCityId){
                  this.cityText = this.chooseCityId;
                   let res = await getAddressListById({id:this.chooseCityId});
                    if(res.code === 200){
                        this.$nextTick(()=>{
                            this.area=res.data;
                        })
                    }
                    this.areaText = this.chooseAreaId;
                }
            }
      },

     async provinceInit(){
         let res = await getAddressListById();
         if(res.code === 200){
             this.$nextTick(()=>{
                this.province=res.data;
             })
         }
      },
      async cityInit(id){
        if(!id){return false}
        this.propData.regionId = id;
        this.propData.provinceId = id;
        this.$emit('address-id',this.propData);
        this.provinceId = id;
        this.cityText = '';
        this.areaText = '';
         let res = await getAddressListById({id:id});
         if(res.code === 200){
             this.$nextTick(()=>{
                this.city=res.data;
             })
         }
      },
      async areaInit(id){
        if(!id){return false}
        this.propData.regionId = id;
        this.propData.cityId = id;
        this.$emit('address-id',this.propData);
        this.cityId = id;
        this.areaText = '';
         let res = await getAddressListById({id:id});
         if(res.code === 200){
             this.$nextTick(()=>{
                this.area=res.data;
             })
         }
      },
      areaChange(id){
            if(!id){return false}
               this.propData.regionId = id;
              this.propData.areaId = id;
              this.$emit('address-id',this.propData);
            this.areaId = id;
      },
     
      cityClear(){
        this.cityText = '';
        this.areaText = '';
        this.city = []
        this.area = [];
        this.$emit('address-id','');
        this.propData.regionId = '';
          this.propData.cityId = '';
          this.propData.areaId = '';
        this.propData.provinceId = '';
          this.$emit('address-id',this.propData);
      },
      areaClear(){
        this.areaText = '';
        this.area = [];
           this.propData.regionId = this.provinceId;
          this.propData.cityId = '';
          this.propData.areaId = '';
          this.$emit('address-id',this.propData);
      },
       lastClear(){
        this.areaText = '';
        this.area = [];
         this.propData.regionId = this.cityId;
          this.propData.areaId = '';
          this.$emit('address-id',this.propData);
      },
  }
}
</script>

<style lang="scss" scoped>
.app-breadcrumb.el-breadcrumb {
  display: inline-block;
  font-size: 14px;
  line-height: 50px;
  margin-left: 8px;

  .no-redirect {
    color: #97a8be;
    cursor: text;
  }
}
</style>
